
// 信封
.start {
  position: relative;
  animation: show-letter 2s;
  animation-fill-mode: forwards;

  .up-letter img, .down-letter img {
    width: 15rem;
  }

  // 上信封
  .up-letter {
    top: -5rem;
    z-index: 1;
    position: absolute;
  }

  .letter-wrapper {
    position: relative;

    // 下信封
    .down-letter {
      position: relative;
      z-index: 2;
      .open{
        position: absolute;
        top:4rem;
        left: 6.8rem;
        animation: open-arrow 4s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        i{
          font-size: 1.2rem;
          color: #a7a5ed;
        }
        i:hover{
          color: #b5b2ff;
        }
      }
    }

    // 信纸
    .letter {
      position: absolute;
      z-index: 2;
      left: 0.25rem;

      img {
        width: 14.5rem;
        height: 7rem;
      }

      // 信纸中的内容
      .letter-content {
        position: relative;
        text-align: center;
        font-size: 1.5rem;
        font-family: myfont;
        padding-top: 1rem;
        top: -7.4rem;

        .open-letter {
          margin-top: 1rem;

          i {
            color: #ff1b4e;
            font-size: 1.8rem;
          }
        }
      }
    }
  }
}

// 信纸移动动画
@keyframes letter-move-up {
  0% {
    top: -0rem;
  }
  100% {
    top: -3rem;
  }
}

// 信封变淡
@keyframes letter-hidden {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  90%{
    opacity: 0;
  }

  100%{
    opacity: 0;
  }
}

// 显示信封动画
@keyframes show-letter {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// open键动画
@keyframes open-arrow {
  0%{
    transform: translateY(0rem);
  }

  50%{
    transform: translateY(-0.3rem);
  }

  100%{
    transform: translateY(0rem);
  }
}

